<template>
  <div class="app-container">
    <div class="liucheng">
      <div class="liucheng-cen">
        <div class="search">
          <el-input
            width="80%"
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>
          <el-button size="small" type="success" @click="addClassify">新增分类</el-button>
        </div>
        <el-tree
          :data="threeData"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
          v-loading="loading"
          :props="defaultProps"
          :expand-on-click-node="false">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ data.titles }}</span>
            <span>
              <el-button type="text" size="mini" @click="() => look(data)">查看详情</el-button>
              <el-button type="text" size="mini" @click="() => writeOne(data,index)">编辑分类</el-button>
              <el-button type="text" size="mini" @click="() => write(data)">标题管理</el-button>
              <el-button type="text" size="mini" @click="() => remove(node, data)">删除分类</el-button>
            </span>
          </span>
        </el-tree>
      </div>
    </div>
    <el-dialog :visible.sync="showBox" title="原辅料分类添加" :modal-append-to-body="false" :modal="true" width="60">
		  <div class="change">
		    <p>
		      <span>原辅料分类</span>
		      <input type="text" v-model="title" placeholder="请输入原辅料分类" />
		    </p>
		  </div>
		  <div slot="footer" class="dialog-footer">
		    <el-button @click="showBox = false">取消</el-button>
		    <el-button type="primary" @click="save" :loading="isClick">保存</el-button>
		  </div>
		</el-dialog>
  </div>
</template>

<script>
let tempIndex = null,parentId = null,kgid = null; //0新增一级分类，1新增无限极分类，2修改分类;分类父级id
import { getTestFenlei,updateTestFenlei,addTestFenlei } from '@/api/testcenter'
export default {
  data(){
    return{
      filterText: '',  //筛选的条件
      threeData: [],   //分类数据
      tempData: {},    //修改得数据
      showBox: false,  //弹窗
      visible: false,
      isClick: false,
      loading: true,
      defaultProps:{
        children: 'childsList',
        label: 'name'
      },
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted(){
    this.getlist()
  },
  methods: {
    /**
     * 获取分类列表
     */
    getlist(){
      getTestFenlei({status: 'yfl'}).then(res => {
        console.log(res)
        this.threeData = res.data.records
        this.loading = false
      })
    },
    /**
     * 筛选分类
     */
    filterNode(value, data) {
      if (!value) return true;
      return data.titles.indexOf(value) !== -1;
    },
    /**
     * 新增一级分类
     */
    addClassify(){
      this.title = ''
      tempIndex = -1
      this.showBox = true
    },
    /**
     * 查看数据
     */
    look(data){
      this.$router.push({
				name: 'Yuanfuliaojieguo'
      })
      sessionStorage.setItem('yufuliao',JSON.stringify(data))
    },
    /**
     * 编辑分类
     */
    writeOne(item,index){
      console.log(item)
      this.showBox = true
      kgid = item.yfid
      this.title = item.titles
      tempIndex = index
    },
    /**
     * 标题管理
     */
    write(data){
      this.$router.push({
        name: 'Writeyuanfuliao',
        params: {
          id: data.yfid
        }
      })
    },
    /**
     * 保存新增或修改数据
     */
    save(){
      this.isClick = true
      if(tempIndex != -1){
        updateTestFenlei({titles: this.title,yfid: kgid}).then(res => {
          console.log(res)
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          })
          this.getlist()
          this.isClick = false
        })
      }else{
        addTestFenlei({titles: this.title,status: 'yfl'}).then(res =>{
          console.log(res)
          this.$message({
            showClose: true,
            message: res.message,
            type: 'success'
          })
          this.getlist()
          this.isClick = false
        })
      }
      tempIndex = -1
      this.showBox = false
    },
    /**
     * 删除数据
     */
    remove(node,data){
      console.log('node,data',node,data)
      deleteAnquanMulu(data.id).then(res => {
        console.log(res)
        this.$message({
          message: '删除成功！',
          type: 'success'
        })
        this.getlist()
      })
    }
  }
}
</script>

<style scoped lang="scss">
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e !important;
  border-color: #18a05e !important;
}
/deep/.el-button--primary:hover,
.el-button--primary:focus {
  background: #18a05e !important;
  border-color: #18a05e !important;
  color: #fff !important;
}
/deep/.el-button:hover,
.el-button:focus {
  color: #18a05e;
  background-color: transparent;
}
/deep/.el-button--primary {
  color: #fff;
  background-color: #18a05e;
  border-color: #18a05e;
}
/deep/.el-button--text {
  color: #00c666 !important;
}
.liucheng-cen{
  width: 60%;
  // margin: 0 auto;
}
.change {
  display: flex;
  flex-wrap: wrap;
  > p {
    width: 80%;
    font-size: 14px;
    display: flex;
    align-items: center;
    color: #333;
    /deep/.el-input__inner {
      width: inherit;
      background: none;
      height: 32px;
      line-height: 32px;
      color: #333;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 25px;
    }
    /deep/.el-input__icon {
      line-height: 32px;
    }
    .userselect {
      // max-width: 250px;
      flex: 1;
    }

    > span {
      display: block;
      width: 120px;
      text-align: right;
      padding-right: 15px;
    }
    > input {
      width: inherit;
      flex: 1;
      height: 32px;
      border-radius: 3px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding-left: 10px;
      color: #333;
    }
  }
}
.search{
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  /deep/.el-input__inner{
    width: 85%;
    height: 32px;
		line-height: 32px;
  }
}
.app-container{
  padding: 20px;
}
.liucheng{
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.1);
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>